<!DOCTYPE html>
<html>
<head>
    <title>图表统计</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="木兰湾管理系统">
    <script type="text/javascript" src="../../static/include/header-css.js"></script>
</head>
<body ontouchstart>
<div>
    <form id="search-form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">开始日期</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请选择开始日期" name="startDate" id="startDate">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">结束日期</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请选择结束日期" name="endDate" id="endDate">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">统计图表</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="userChartList" type="text" value="" name="aaa">
            </div>
        </div>
        <input type="hidden" name='userChartId' id="userChartId" value=""/>
    </form>
</div>
<a href="javascript:getJsonData();" class="weui-btn weui-btn_primary">查询</a>
<div id="container"
     style="width: 100%; height: 70%; margin: 0 auto">
</div>
<script type="text/javascript" src="../../static/include/footer-js.js"></script>
<script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="../../static/js/echarts/mulanbaychart.js"></script>
<script>
    $(function() {
        datePicker("startDate");
        datePicker("endDate");
        // 查询条件今年的
        var formData = {
            startDate: getYear(0)+'-01-01',
            endDate: getYear(0)+'-12-31'
        };
        $('#search-form').loadJson(formData);
        loadUserChartTree();
    });
    function getJsonData(){
        var para = form2Json("search-form");
        if(para.userChartId==null||para.userChartId==0){
            //$.alert("请选择图表");
            //return;
        }
        //获取配置
        var url = '/userChart/getChartPara';
        doAjax(para, url, 'GET',false, function(data) {
            createChart(data);
        });
    }
    function createChart(paraData) {
        var para = eval('(' + paraData.para + ')');
        var url = paraData.url;
        doAjax(para, url, 'GET',false, function(data) {
            if(paraData.chartType=='PIE'){
                createPieData(data);
            }else if(paraData.chartType=='LINE'){
                createLineData(data);
            }else if(paraData.chartType=='BAR'){
                //x,y坐标对换
                //data.xAxisType='value';
                createBarData(data);
            }else if(paraData.chartType=='SCATTER'){
                createScatterData(data);
            }else if(paraData.chartType=='CALENDER_PIE'){
                createCalanderPieData(data);
            }
        });
    }
    function loadUserChartTree() {
        var url = '/userChart/getUserChartTreeSm';
        loadSelectList(url,'userChartList','userChartId','选择图表',true,true,function (ov,nv) {
            getJsonData();
        },function (data) {
            getJsonData();
        });
    }
</script>
</body>
</html>